<template>
  <div id="app">
     <blogHeader></blogHeader>

     <transition name="slide-fade">
           <router-view class="child-view"></router-view>
     </transition>
     <blogFooter></blogFooter>
     <blogLogin></blogLogin>
     <blogRegister></blogRegister>
  </div>
</template>

<script>
import blogHeader from './components/blogHeader'
import blogContent from './pages/blogContent'
import blogFooter from './components/blogFooter'
import blogLogin from './pages/blogLogin'
import blogRegister from './pages/blogRegister'

export default {
  name: 'App',
  data () {
      return {

      }
  },
  components: {
     blogHeader : blogHeader,
     blogContent: blogContent,
     blogFooter : blogFooter,
     blogLogin : blogLogin,
     blogRegister : blogRegister
  }
}
</script>

<style>
.slide-fade-active,.slide-fade-leave-active{
      transition: opacity .5s;
  }
.slide-fade,.slide-fade-leave-active{
   opacity:0;
}
.el-message{
  z-index:22222000!important
}
.el-popper{
      z-index: 100001!important;
 }
.w-e-toolbar{
  background:rgb(243,239,223)!important;

}
.w-e-text-container{
  height:auto!important
}
.w-e-text::-webkit-scrollbar
{
  width: 8px;
  height: 16px;
  background-color: #F5F5F5;
}
 .w-e-text{
   height:500px!important;
   background:rgb(255,255,228);
}

.w-e-text::-webkit-scrollbar-track
{
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  border-radius: 4px;
  background-color: #F5F5F5;
}
 

.w-e-text::-webkit-scrollbar-thumb
{
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: #555;
}
body{
  background: #f1f1f1;
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;

}
*{
  margin:0;
  padding:0;
  font-size:14px
}
.el-dialog__header{
  padding:0;
  height:40px;
  background:#409EFF;
  color:white;
  line-height:40px;
  text-align:left
}
.el-dialog__title{
  color:white;
  margin-left:10px
}
.el-dialog__headerbtn{
  display:none
}
.el-dialog{
  width:300px!important
}
.login .el-dialog__body{
      padding:30px 20px 15px 20px
  }
</style>
